<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    组件使用的三步骤：
      1. 定义组件
      2. 注册组件
      3. 使用组件

    定义组件：
      就是定义一个包含有特殊选项的对象，这些选项与 new Vue() 传递的选项配置差不多
        1. 必须要通过 template 或者 render 选项来描述组件的结构
        2. 组件没有 el 配置项，el 是只有根组件需要的
        3. data 选项必须写成函数返回对象的形式，原因是组件是可以复用的。每用一次就会得到一个新的组件实例，要确保实例之间是相互独立的。这时如果data直接写对象会造成实例之间的污染。

    注册组件：
      分为全局组件与局部组件
      全局组件的组件，在项目的任何组件中都能直接使用。
      局部组件，在哪儿注册就只能在哪儿使用。

      全局注册：通过 Vue.component() 来注册
        1. 注册的代码，需要放置在 new Vue() 之前
      局部注册：通过 配置 components 选项来注册

      全局注册语法：
        Vue.component(name, options)
          name - 组件的名字
          options - 组件的配置对象

      局部注册语法：
        {
          data() {},
          components: {
            key1: value1,
            key2: value2
          }
        }
        key - 组件的名字
        value - 组件的配置对象

    使用组件：
      将组件名当成自定义标签（元素）来使用即可。

   -->
    <div id="app">
      <!-- <my-p></my-p> -->

      <!-- 使用组件 -->
      <my-box></my-box>

      <my-box></my-box>

      <my-box></my-box>

      <my-box> </my-box>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      // 定义组件
      const box = {
        // 组件自己的状态数据，响应式数据
        data() {
          return {
            count: 10,
          };
        },
        // 组件模板，也就组件的结构
        template: `
          <div>
            <p>我是 Box 组件 - {{ count }}</p>
            <my-header></my-header>
            <my-p></my-p>
          </div>
        `,
        // 注册局部组件的一个配置选项
        components: {
          "my-p": {
            template: `
              <p>我是一个屁</p>
            `,
          },
        },
      };

      Vue.component("my-box", box);

      Vue.component("my-header", {
        template: `
          <div>
            <button>Header</button>  
          </div>
        `,
      });

      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>
